<template>
  <div class="shaixuanronghe_wrap">
    <div class="left_wrap">
      <div class="fenlei_wrap">
        <div class="common_title">
          <div class="common_title_name">表单分类</div>
          <div class="common_title_btns">
            <div class="title_btn_item">
              <el-button
                class="bin_button calcImport"
                type="primary"
                @click="importForm"
              >
                导入
              </el-button>
            </div>
          </div>
        </div>
        <div class="common_collapse">
          <el-collapse class="collList" v-model="activeNames">
            <el-collapse-item
              v-for="(item, index) in rongheTree"
              :key="index"
              :title="item.databaseTypeName.toString()"
              :name="item.databaseType"
            >
              <div v-for="(item1, index1) in item.children" :key="index1">
                <div class="listitem">
                  {{ item1.dataTypeName }}
                </div>
                <div
                  :class="['item', { act: leftSelectId === item2.id }]"
                  v-for="(item2, index2) in item1.children"
                  :key="index2"
                  @click="clickLeftTreeItem(item2.id, item2.dataTableId)"
                >
                  <!-- @contextmenu.prevent="showContextMenu($event, item2)" -->
                  {{ item2.dataTableName }}
                </div>
              </div>
            </el-collapse-item>
          </el-collapse>
        </div>
      </div>
      <div class="his_wrap">
        <div class="common_title">
          <div class="common_title_name">融合记录</div>
          <div class="common_title_btns">
            <div class="title_btn_item">
              <el-button
                class="bin_button"
                type="primary"
                @click="clearAllData()"
                >一键清空</el-button
              >
            </div>
          </div>
        </div>
        <div class="his_list_wrap">
          <div class="his_list">
            <div
              :class="[
                'list_item',
                { active: hisTableId === item.fusionTableId },
              ]"
              v-for="(item, index) in rongheHisList"
              :key="index"
              @click="clickHis(item)"
            >
              <div
                class="item_left"
                :title="item.createBy + '进行表单融合' + item.createTime"
              >
                <div class="name">{{ item.createBy }}</div>
                <div class="name">进行表单融合</div>
                <div class="time">{{ item.createTime }}</div>
              </div>
              <!-- <div class="item_btn">
                <div class="icon el-icon-delete"></div>
              </div> -->
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="right_wrap">
      <div class="common_title">
        <div class="common_title_name">数据</div>
        <div class="common_title_btns">
          <div class="title_btn_item">
            <el-button
              class="bin_button shaixuanBtn"
              type="primary"
              @click="filterShow = true"
              >筛选</el-button
            >
          </div>
          <div class="title_btn_item">
            <el-button
              class="bin_button ronghepingtaiBtn"
              type="primary"
              @click="clickRonghe"
            >
              融合
            </el-button>
          </div>
          <div class="title_btn_item">
            <el-button
              class="bin_button addBtnexport"
              type="primary"
              @click="clickExport"
            >
              导出
            </el-button>
          </div>
        </div>
      </div>
      <div class="shuju_table_wrap">
        <div class="shuju_table">
          <el-table
            ref="mainTableRef"
            v-if="tableList.length"
            class="bin_table 345"
            :border="true"
            style="width: 100%"
            height="style"
            :data="tableList"
          >
            <el-table-column type="selection" width="55"> </el-table-column>
            <el-table-column
              min-width="170"
              resizable
              v-for="(item1, index1) in tabelHeader"
              v-if="item1.columnDisplay === '1'"
              sortable
              :key="index1"
              :prop="item1.columnCode"
              :label="item1.columnName"
              show-overflow-tooltip
            >
            </el-table-column>
            <el-table-column label="操作" min-width="140" align="center">
              <template slot-scope="scope">
                <div class="caozuo_btns">
                  <div
                    class="icon el-icon-edit"
                    @click="onZhaiquItemEditFn(scope.row)"
                  ></div>
                  <div
                    class="icon el-icon-delete"
                    @click="onZhaiquItemDeleteFn(scope.row)"
                  ></div>
                </div>
              </template>
            </el-table-column>
          </el-table>
          <el-tabs
            v-if="filterTableResult.length"
            class="bin_tabs table_tabs"
            @tab-click="filterTabsSelectChange"
            v-model="filterTabsSelect"
            type="card"
            style="height: 100%"
          >
            <el-tab-pane
              :label="item.tableName"
              v-for="item in filterTableResult"
              :key="item.tableId"
              :name="item.tableId"
            >
              <div class="dialog_table_wrap">
                <el-table
                  class="bin_table 646"
                  :border="true"
                  style="width: 100%"
                  height="calc(100% - 65px)"
                  :data="item.tableData"
                >
                  <el-table-column type="selection" width="55">
                  </el-table-column>
                  <el-table-column
                    min-width="170"
                    resizable
                    v-for="(item1, index1) in item.tableHeader"
                    v-if="item1.columnDisplay === '1'"
                    :key="index1"
                    :prop="item1.columnCode"
                    :label="item1.columnName"
                    show-overflow-tooltip
                  >
                  </el-table-column>
                </el-table>
                <div class="shuju_fenye">
                  <div class="pageBox">
                    <!-- <div class="pageInfo">
                      <span class="size">{{ pageSize }}</span>
                      <span>条每页，共{{ item.tableTotalSize }}条</span>
                    </div> -->
                    <!-- layout=" prev, pager, next" -->
                    <el-pagination
                      class="bin_fenyeqi"
                      :current-page.sync="currPage2"
                      :page-sizes="[10, 50, 100, 200, 500, 1000]"
                      :page-size="pageSize2"
                      prev-text="上一页"
                      next-text="下一页"
                      layout="total, sizes,->,prev, pager, next"
                      @current-change="handleCurrentChange2"
                      @size-change="handleSizeChange2"
                      popper-class="bin_fenyeqi_popper"
                      :total="item.tableTotalSize"
                    >
                    </el-pagination>
                  </div>
                </div>
              </div>
            </el-tab-pane>
          </el-tabs>
        </div>
        <div class="shuju_fenye" v-if="filterTableResult.length == 0">
          <div class="pageBox">
            <!-- <div class="pageInfo">
              <span class="size">{{ pageSize }}</span>
              <span>条每页，共{{ pageTotal }}条</span>
            </div> -->
            <!-- layout=" prev, pager, next" -->
            <el-pagination
              class="bin_fenyeqi"
              :current-page.sync="currPage"
              :page-sizes="[10, 50, 100, 200, 500, 1000]"
              :page-size="pageSize"
              prev-text="上一页"
              next-text="下一页"
              @current-change="handleCurrentChange"
              @size-change="handleSizeChange"
              popper-class="bin_fenyeqi_popper"
              layout="total, sizes,->,prev, pager, next"
              :total="pageTotal"
            >
            </el-pagination>
          </div>
        </div>
      </div>
    </div>
    <el-dialog
      v-zsdialogDrag
      title="导入文件"
      :visible.sync="daoruDialogFlag"
      :closeOnClickModal="false"
      class="bin_dialog daoru_dialog dialog-1200"
      width="70%"
      top="10vh"
    >
      <div class="daoru_dialog_content">
        <div class="search_wrap">
          <div class="search_item">
            <div class="name">表单类型：</div>
            <div class="ipt">
              <el-cascader
                :options="optionsTree"
                class="bin_cascader multi_cascader"
                popper-class="bin_cascader_popper"
                :props="fileTypeProps"
                v-model="multiSelect"
                filterable
                clearable
              >
                <template slot-scope="{ node, data }">
                  <span>{{ data.name }}</span>
                  <span v-if="!node.isLeaf">
                    ({{ data.children.length }})
                  </span>
                </template>
              </el-cascader>
            </div>
          </div>
          <div class="search_btn">
            <el-button
              type="primary"
              size="medium"
              class="bin_button"
              @click="importFilterSearch"
              style="margin-left: 20px"
            >
              搜索
            </el-button>
          </div>
        </div>
        <el-tabs
          class="bin_tabs"
          v-model="editableTabsValue"
          type="card"
          style="height: 100%"
        >
          <el-tab-pane
            :label="item.tableName"
            v-for="item in importDialogTabsTable"
            :key="item.tableId"
            :name="item.tableId"
            class="daoru_tab_pane"
          >
            <div class="dialog_table_wrap">
              <el-table
                class="bin_table 6543"
                :border="true"
                style="width: 100%"
                height="98%"
                :data="item.tableData"
              >
                <el-table-column type="selection" width="55"> </el-table-column>
                <el-table-column
                  min-width="170"
                  resizable
                  v-for="(item1, index1) in item.tableHeader"
                  v-if="item1.columnDisplay === '1'"
                  :key="index1"
                  :prop="item1.columnCode"
                  :label="item1.columnName"
                  show-overflow-tooltip
                >
                </el-table-column>
              </el-table>
            </div>
            <!-- <div class="dialog_fenye_wrap">
              <div class="pageBox">
                <div class="pageInfo">
                  <span class="size">{{ item.tablePageSize }}</span>
                  <span>条每页，共{{ item.tableTotalSize }}条</span>
                </div>
                <el-pagination
                  class="bin_fenyeqi"
                  :current-page.sync="item.tableCurrPage"
                  :page-size="item.tablePageSize"
                  prev-text="上一页"
                  next-text="下一页"
                  popper-class="bin_fenyeqi_popper"
                  layout=" prev, pager, next"
                  @current-change="(e) => pageMore(e, index)"
                  :total="item.tableTotalSize"
                >
                </el-pagination>
              </div>
            </div> -->
          </el-tab-pane>
        </el-tabs>

        <div class="dialog_main_btns">
          <el-button
            type="primary"
            class="bin_button"
            @click="onDaoruDialogCancelFn"
          >
            取消
          </el-button>
          <el-button
            type="primary"
            class="bin_button"
            @click="onDaoruDialogSubmitFn"
          >
            确认
          </el-button>
        </div>
      </div>
    </el-dialog>
    <el-dialog
      v-zsdialogDrag
      title="筛选"
      :visible.sync="filterShow"
      :closeOnClickModal="false"
      class="bin_dialog dialog-1200"
      width="70%"
      top="10vh"
    >
      <div class="filter_dialog_content">
        <div class="filter_wrap">
          <div class="selectMult">
            <el-tree
              class="bin_tree"
              :data="rongheTree"
              show-checkbox
              node-key="id"
              ref="filterTree"
              highlight-current
              @check-change="treeSelectChange"
              :props="defaultProps"
            >
              <span class="custom-tree-node" slot-scope="{ node, data }">
                <span>{{ node.label }}</span>
                <span v-if="!node.isLeaf"> ({{ data.children.length }}) </span>
              </span>
            </el-tree>
          </div>
          <div class="filter_form_wrap">
            <el-form label-width="80px" size="mini">
              <!-- <div class="top_form">
                <el-form-item label="任务号：">
                  <el-radio-group
                    v-model="filterForm.checked"
                    class="bin_radio"
                  >
                    <el-radio
                      v-for="(item, index) in filterForm.taskList"
                      :key="index"
                      :label="item.value"
                    >
                      {{ item.name }}
                    </el-radio>
                  </el-radio-group>
                  <el-select
                    v-model="filterForm.checked"
                    placeholder="请选择"
                    class="bin_radio"
                  >
                    <el-option
                      v-for="item in filterForm.taskList"
                      :key="item.value"
                      :label="item.name"
                      :value="item.value"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="日期：">
                  <el-date-picker
                    class="bin_datetime"
                    popper-class="bin_datetime_popper"
                    v-model="filterForm.date"
                    type="daterange"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                    value-format="yyyy-MM-dd"
                  >
                  </el-date-picker>
                </el-form-item>
                <el-form-item label="时间：">
                  <el-time-picker
                    is-range
                    class="bin_datetime"
                    popper-class="bin_datetime_popper"
                    v-model="filterForm.time"
                    range-separator="至"
                    start-placeholder="开始时间"
                    end-placeholder="结束时间"
                    placeholder="选择时间范围"
                    value-format="HH:mm:ss"
                  >
                  </el-time-picker>
                </el-form-item>
              </div> -->
              <div class="bottom_form">
                <div
                  class="sf"
                  v-for="(item, index) in filterForm.columnOptions"
                  :key="index"
                >
                  <el-row :gutter="24" type="flex" style="margin: 0">
                    <el-col :span="5">
                      <el-form-item label="" label-width="0">
                        <!-- <el-checkbox-group v-model="item.value" class="bin_checkout">
                          <el-checkbox> {{ item.columnCode }}</el-checkbox>
                        </el-checkbox-group> -->
                        <el-select
                          class="bin_select"
                          filterable
                          v-model="item.value"
                          placeholder="请选择"
                          @change="
                            (e) => {
                              oponeChange(e, index);
                            }
                          "
                        >
                          <el-option
                            v-for="(item1, index) in clumsObj"
                            :key="index"
                            :label="item1.columnCode"
                            :value="item1.columnCode"
                          >
                          </el-option>
                        </el-select>
                      </el-form-item>
                    </el-col>
                    <el-col :span="5">
                      <el-form-item label=" " label-width="0">
                        <el-select
                          class="bin_select"
                          filterable
                          v-model="item.value2"
                          placeholder="请选择"
                        >
                          <el-option
                            v-for="(item2, index1) in item.colum2"
                            :key="index1"
                            :label="item2.lable"
                            :value="item2.value"
                          >
                          </el-option>
                        </el-select>
                      </el-form-item>
                    </el-col>
                    <el-col :span="5">
                      <el-form-item label=" " label-width="0">
                        <el-select
                          class="bin_select"
                          allow-create
                          filterable
                          v-model="item.selected"
                          placeholder="请选择"
                        >
                          <el-option
                            v-for="(item2, index1) in item.possibleValues"
                            :key="index1"
                            :label="item2"
                            :value="item2"
                          >
                          </el-option>
                        </el-select>
                      </el-form-item>
                    </el-col>
                    <el-col :span="5">
                      <el-form-item label=" " label-width="0">
                        <el-select
                          class="bin_select"
                          filterable
                          v-model="item.value3"
                          placeholder="请选择"
                        >
                          <el-option
                            v-for="(item3, index3) in item.colum3"
                            :key="index3"
                            :label="item3.lable"
                            :value="item3.value"
                          >
                          </el-option>
                        </el-select>
                      </el-form-item>
                    </el-col>
                    <el-col :span="4">
                      <el-button
                        type="primary"
                        size="mini"
                        class="bin_button"
                        @click="delRow(index)"
                      >
                        {{
                          filterForm.columnOptions.length == 1 ? "清除" : "删除"
                        }}
                      </el-button>
                    </el-col>
                  </el-row>
                </div>
                <div
                  class="addbtn"
                  style="display: flex; justify-content: center"
                >
                  <el-button
                    class="bin_button"
                    icon="el-icon-plus"
                    size="small"
                    @click="addBtn22"
                  >
                  </el-button>
                </div>
              </div>
            </el-form>
          </div>
        </div>
        <div class="dialog_main_btns">
          <el-button
            type="primary"
            class="bin_button"
            @click="onDaoruDialogCancelFn"
          >
            取消
          </el-button>
          <el-button type="primary" class="bin_button" @click="clear">
            重置筛选条件
          </el-button>
          <el-button
            type="primary"
            class="bin_button"
            @click="onFilterDialogSubmitFnsss"
          >
            确认
          </el-button>
        </div>
      </div>
    </el-dialog>
    <el-dialog
      v-zsdialogDrag
      :title="rongheTitle"
      :visible.sync="rongheDialogVisible"
      :closeOnClickModal="false"
      class="bin_dialog ronghe_dialog dialog-1200"
      width="70%"
      top="10vh"
    >
      <div class="daoru_dialog_content">
        <template v-if="rongheStep === 1">
          <div class="ronghe_text">本操作只支持两个表单进行融合！</div>
          <div class="search_wrap">
            <div class="search_item">
              <div class="name">选择表单：</div>
              <div class="ipt">
                <el-cascader
                  :options="rongheTree"
                  class="bin_cascader multi_cascader"
                  popper-class="bin_cascader_popper "
                  :props="fileTypeProps"
                  v-model="rongheSelect"
                  placeholder="请选择两张表单"
                  @change="rongheChange"
                  filterable
                  clearable
                >
                  <template slot-scope="{ node, data }">
                    <span>{{ data.name }}</span>
                    <span v-if="!node.isLeaf">
                      ({{ data.children.length }})
                    </span>
                  </template>
                </el-cascader>
              </div>
            </div>
            <div class="search_btn">
              <el-button
                type="primary"
                size="medium"
                class="bin_button"
                @click="rongheSearch"
                style="margin-left: 20px"
              >
                搜索
              </el-button>
            </div>
          </div>
          <div class="filter_wrap">
            <div
              v-for="(item, index) in rongheDialogTable"
              :key="index"
              class="contentbox"
            >
              <div class="table_text">{{ item.tableName }}</div>
              <el-table
                ref="rongheTableRef"
                class="bin_table 09"
                :border="true"
                style="width: 100%"
                height="style"
                :data="item.tableData"
              >
                <el-table-column type="selection" width="55"> </el-table-column>
                <el-table-column
                  min-width="170"
                  resizable
                  v-for="(item1, index1) in item.tableHeader"
                  v-if="item1.columnDisplay === '1'"
                  sortable
                  :key="index1"
                  :prop="item1.columnCode"
                  :label="item1.columnName"
                  show-overflow-tooltip
                >
                </el-table-column>
              </el-table>
            </div>
          </div>
        </template>
        <template v-if="rongheStep === 2">
          <div class="fusionColumn">
            <div
              class="fusionItem"
              v-for="(item, index) in rongheDialogTable"
              :key="index"
            >
              <div class="table_text">{{ item.tableName }}</div>
              <!-- <el-radio-group class="bin_radio fusionRadio" v-model="item.rongheFusion">
                <el-radio
                  v-for="(item1, index1) in item.tableHeader"
                  :label="item1.dataColumnId"
                  :key="index1"
                  >{{ item1.columnName }}
                </el-radio>
              </el-radio-group> -->
              <el-select
                filterable
                class="bin_radio fusionRadio"
                v-model="item.rongheFusion"
                placeholder="请选择"
                clearable
              >
                <el-option
                  v-for="(item1, index1) in item.tableHeader"
                  :key="index1"
                  :label="item1.columnName"
                  :value="item1.dataColumnId"
                >
                </el-option>
              </el-select>
            </div>
          </div>
        </template>
        <template v-if="rongheStep === 3">
          <div class="displayColumnNew">
            <div
              class="displayItem"
              v-for="(item, index) in rongheDialogTable"
              :key="index"
            >
              <div class="table_text">{{ item.tableName }}</div>
              <el-checkbox-group
                v-model="item.displayName"
                class="bin_checkout displayCheckbox"
              >
                <el-checkbox
                  v-for="(item1, index1) in item.tableHeader"
                  :label="item1.dataColumnId"
                  :disabled="item1.dataColumnId === item.rongheFusion"
                  :key="index1"
                  >{{ item1.columnName }}
                </el-checkbox>
              </el-checkbox-group>
            </div>
          </div>
        </template>
        <div class="dialog_main_btns">
          <el-button type="primary" class="bin_button" @click="rongheCancel">
            取消
          </el-button>
          <el-button
            type="primary"
            class="bin_button"
            v-if="rongheStep !== 1"
            @click="ronghePrevStep"
          >
            上一步
          </el-button>
          <el-button
            type="primary"
            class="bin_button"
            v-if="rongheStep !== 3"
            @click="rongheNextStep"
          >
            下一步
          </el-button>
          <el-button
            type="primary"
            class="bin_button"
            v-if="rongheStep === 3"
            @click="rongheSubmitFn"
          >
            确认
          </el-button>
        </div>
      </div>
    </el-dialog>
    <!-- 编辑弹窗 -->
    <el-dialog
      v-zsdialogDrag
      title="编辑"
      :visible.sync="editDialogFlag"
      :closeOnClickModal="false"
      class="bin_dialog dialog-1000"
      width="50%"
      top="10vh"
    >
      <div class="editDialog">
        <div
          class="input-box"
          v-for="(item, index) in tabelHeaderForm"
          :key="index"
        >
          <div class="name">{{ item.columnName }}:</div>
          <div class="input">
            <!--  -->
            <el-input
              v-model="item.inputValue"
              placeholder="请输入内容"
            ></el-input>
          </div>
        </div>
        <div class="dialog_main_btns">
          <el-button
            type="primary"
            class="bin_button"
            @click="oneditruDialogCancelFn"
          >
            取消
          </el-button>
          <el-button
            type="primary"
            class="bin_button"
            @click="oneditDialogSubmitFn"
          >
            确认
          </el-button>
        </div>
      </div>
    </el-dialog>
    <!-- 导出弹窗 -->
    <el-dialog
      v-zsdialogDrag
      title="导出"
      :visible.sync="daochuDialogFlag"
      :closeOnClickModal="false"
      class="bin_dialog dialog-1000"
      width="50%"
      top="10vh"
    >
      <dao-chu
        v-if="daochuDialogFlag"
        :daoruTableId="leftSelectId"
        :rongheTableId="hisTableId"
        :selected="mainTableSelectedId"
        @close="daochuDialogFlag = false"
      ></dao-chu>
    </el-dialog>
  </div>
</template>

<script>
import daoChu from "../../../components/daochu.vue";
export default {
  components: { daoChu },
  data() {
    return {
      defaultProps: {
        children: "children",
        label: "name",
      },
      daochuDialogFlag: false,
      editDialogFlag: false,
      mainTableSelectedId: [],
      fileTypeProps: {
        value: "sid",
        label: "name",
        children: "children",
        multiple: true,
      },
      rongheTree: [],
      rongheSelect: [],
      rongheStep: 1,
      rongheDialogTable: [],
      rongheFusion: "",
      rongheHisList: [],
      hisTableId: "",
      fusionId: "",
      activeNames: "",
      pageLeftTree: [],
      optionsTree: [],
      leftSelectId: "",
      editableTabsValue: "1",
      multiSelect: [],
      importDialogTabsTable: [],
      fileType: "", // 导入的文件类型
      fileTypeOptions: [],
      daoruDialogFlag: false,
      filterTabsSelect: "",
      filterTableResult: [],
      filterShow: false,
      filterTables: [],
      filterForm: {
        checked: "",
        taskList: [
          {
            name: "任务Q1",
            value: 1,
          },
          {
            name: "任务Q2",
            value: 2,
          },
          {
            name: "任务Q3",
            value: 3,
          },
        ],
        date: "",
        time: "",
        columnOptions: [
          {
            value: "",
            value2: "",
            value3: "",
            selected: "",
            possibleValues: [],
            columnType: "",
            colum2: [],
            colum3: [
              { value: "and", label: "与" },
              { value: "or", label: "或" },
            ],
          },
        ],
        possibleValuesnew: [
          {
            value: "",
          },
        ],
        optionsnew: [],
      },
      rongheDialogVisible: false,
      fileTypeOptions: [],
      currPage: 1,
      pageSize: 10,
      pageTotal: 0,
      currPage2: 1,
      pageSize2: 10,
      tabelHeader: [],
      tablerowId: "", //存放id  用于传参
      tabelHeaderForm: [
        {
          inputValue: "",
        },
      ],
      tableList: [],
      dialogTableData: [],
      clumsObj: [],
      shujuTableData: [
        {
          ID: "12345",
          haiyu: "中国南海",
          weidu: "123.14",
          jingdu: "17.11",
          shendu: "5.9",
          yandu: "5.9",
          wendu: "34.33",
          shengsu: "1564.3315",
          beizhu: "-",
          uploadPerson: "张三",
          uploadTime: "2302-15-41 12:12:12",
          editTime: "1231-48-48 12:45:45",
        },
      ],
    };
  },
  computed: {
    rongheTitle() {
      if (this.rongheStep === 1) {
        return "选择融合表单";
      } else if (this.rongheStep === 2) {
        return "选择关联字段";
      } else if (this.rongheStep === 3) {
        return "选择展示字段";
      }
    },
  },
  created() {
    this.getleftTree();
    this.getDaoruSelectOptions();
    this.getHis();
  },
  methods: {
    filterTabsSelectChange() {
      this.currPage2 = 1;
      this.pageSize2 = 10;
      this.onFilterDialogSubmitFn();
    },
    handleCurrentChange2(val) {
      this.currPage2 = val;
      this.onFilterDialogSubmitFn();
    },

    handleSizeChange2(val) {
      this.currPage2 = 1;
      this.pageSize2 = val;
      this.onFilterDialogSubmitFn();
    },
    handleCurrentChange(val) {
      this.currPage = val;
      if (this.hisTableId) {
        this.getTableHeaderAndData(this.hisTableId);
      } else {
        this.getTableHeaderAndData(this.leftSelectId);
      }
    },
    handleSizeChange(val) {
      this.currPage = 1;
      this.pageSize = val;
      if (this.hisTableId) {
        this.getTableHeaderAndData(this.hisTableId);
      } else {
        this.getTableHeaderAndData(this.leftSelectId);
      }
    },
    delRow(index) {
      if (this.filterForm.columnOptions.length != 1) {
        this.filterForm.columnOptions.splice(index, 1);
      } else {
        let options = [
          {
            value: [],
            selected: "",
            value2: "",
            value3: "",
            colum2: [],
            columnType: "",
            colum3: [
              { value: "and", label: "与" },
              { value: "or", label: "或" },
            ],
          },
        ];
        this.$set(this.filterForm, "columnOptions", options);
      }
    },
    clear() {
      this.clumsObj = [];
      this.filterForm = {
        checked: "",
        taskList: [
          {
            name: "任务Q1",
            value: 1,
          },
          {
            name: "任务Q2",
            value: 2,
          },
          {
            name: "任务Q3",
            value: 3,
          },
        ],
        date: "",
        time: "",
        columnOptions: [
          {
            value: "",
            value2: "",
            value3: "",
            selected: "",
            possibleValues: [],
            columnType: "",
            colum2: [],
            colum3: [
              { value: "and", label: "与" },
              { value: "or", label: "或" },
            ],
          },
        ],
        possibleValuesnew: [
          {
            value: "",
          },
        ],
        optionsnew: [],
      };
    },
    oponeChange(val, index) {
      let arr = [];
      let colum2 = [];
      let columnType = "";
      let options = {};
      this.clumsObj.forEach((res) => {
        if (res.columnCode == val) {
          arr = res.possibleValues;
          columnType = res.columnType;
          if (
            res.columnType == "INT" ||
            res.columnType == "DOUBLE" ||
            res.columnType == "FLOAT" ||
            res.columnType == "LONG" ||
            res.columnType == "DECIMAL" ||
            res.columnType == "DATE" ||
            res.columnType == "TIME" ||
            res.columnType == "DATETIME"
          ) {
            colum2 = [
              { value: "=", lable: "等于" },
              { value: "!=", lable: "不等于" },
              { value: ">", lable: "大于" },
              { value: "<", lable: "小于" },
              { value: ">=", lable: "大于等于" },
              { value: "<=", lable: "小于等于" },
            ];
          } else if (res.columnType == "BOOLEAN ") {
            colum2 = [
              { value: "=", lable: "等于" },
              { value: "!=", lable: "不等于" },
            ];
          } else {
            colum2 = [
              { value: "like", lable: "包含" },
              { value: "not like", lable: "不包含" },
              { value: "=", lable: "等于" },
            ];
          }
          options = {
            value: val,
            selected: "",
            value2: "",
            value3: "",
            colum2: colum2,
            possibleValues: arr,
            columnType: columnType,
            colum3: [
              { value: "and", label: "与" },
              { value: "or", label: "或" },
            ],
          };
          this.filterForm.columnOptions[index].columnType = columnType;
          this.filterForm.columnOptions[index].colum2 = colum2;
          this.filterForm.columnOptions[index].colum3 = [
            { value: "and", label: "与" },
            { value: "or", label: "或" },
          ];
          this.filterForm.columnOptions[index].possibleValues = arr;
        }
      });
    },
    treeSelectChange(data, node) {
      let allChecked = this.$refs.filterTree.getCheckedNodes(true, false);
      this.filterTables = allChecked
        .filter((e) => !e.children && e.id)
        .map((e) => {
          return {
            id: e.id,
            tableName: e.dataTableName,
          };
        });
      if (this.filterTables.length) {
        this.getTableColumn();
      }
    },
    getTableColumn() {
      this.clumsObj = [];
      this.$api
        .getTableIntersectionColumns(this.filterTables.map((e) => e.id))
        .then((res) => {
          if (res.code == 200) {
            this.clumsObj = res.result;
            // let options = res.result.map((e) => {
            //   e.value = [];
            //   e.selected = "";
            //   return e;
            // });
            let options = [
              {
                value: [],
                selected: "",
                value2: "",
                value3: "",
                colum2: [],
                columnType: "",

                colum3: [
                  { value: "and", label: "与" },
                  { value: "or", label: "或" },
                ],
              },
            ];
            this.$set(this.filterForm, "columnOptions", options);
          }
        });
    },
    clickHis(item) {
      this.hisTableId = item.fusionTableId;
      this.fusionId = item.id;
      this.leftSelectId = "";
      this.currPage = 1;
      this.getTableHeaderAndData(this.hisTableId);
    },
    rongheCancel() {
      this.rongheDialogVisible = false;
    },
    clearAllData() {
      this.$api.cleanAllData().then((res) => {
        if (res.code == 200) {
          // 成功提示
          this.$message({
            message: res.message,
            type: "success",
          });
          this.tableList = [];
          this.tabelHeader = [];
          this.getleftTree();
          this.getHis();
        }
      });
    },
    onZhaiquItemEditFn(row) {
      //编辑
      this.tabelHeaderForm = this.tabelHeader.map((header) => ({
        columnName: header.columnName,
        inputValue: row[header.columnName] || "", // 使用空字符串作为默认值
        columnIndex: header.columnIndex, // 如果需要排序
      }));
      this.tablerowId = row.id;
      this.tabelHeaderForm.sort((a, b) => a.columnIndex - b.columnIndex);
      this.editDialogFlag = true;
    },
    onZhaiquItemDeleteFn(row) {
      //删除
      this.$api.sxdeleteData([row.id]).then((res) => {
        if (res.code == 200) {
          this.$message({
            message: res.message,
            type: "success",
          });
          this.getTableHeaderAndData(this.leftSelectId); //更新列表
        }
      });
    },
    oneditruDialogCancelFn() {
      // 编辑取消
      this.editDialogFlag = false;
    },
    oneditDialogSubmitFn() {
      // 编辑确定
      const result = this.tabelHeaderForm.reduce((acc, curr) => {
        // 直接使用 curr.columnName 作为键，curr.inputValue 作为值
        acc[curr.columnName] = curr.inputValue;
        return acc;
      }, {}); // 初始累加器是一个空对象
      let data = {
        id: this.tablerowId,
        dataInfo: JSON.stringify(result),
      };
      this.$api.sxupdateData(data).then((res) => {
        if (res.code == 200) {
          this.editDialogFlag = false;
          this.getTableHeaderAndData(this.leftSelectId); //更新列表
        }
      });
    },
    loadNodeFn() {},
    shujutreeNodeClickFn() {},
    appendTreeNodeFn() {},
    getHis() {
      this.$api.queryFusionHis().then((res) => {
        if (res.code == 200) {
          this.rongheHisList = res.result;
        }
      });
    },
    clickExport() {
      if (!this.$refs.mainTableRef) {
        this.$message.warning("请先从左侧选择表单，获取数据");
        return;
      }
      let selected = this.$refs.mainTableRef.selection;
      if (selected.length) {
        this.mainTableSelectedId = selected.map((e) => e.id);
      } else {
        this.$message.warning("请先勾选要导出的数据~");
        return;
      }
      this.daochuDialogFlag = true;
    },
    rongheSubmitFn() {
      let requestData = {
        firstDataTableId: this.rongheDialogTable[0].tableId,
        secondDataTableId: this.rongheDialogTable[1].tableId,
        firstDataIds: this.rongheDialogTable[0].dataSelect,
        secondDataIds: this.rongheDialogTable[1].dataSelect,
        firstFusionColumnId: this.rongheDialogTable[0].rongheFusion,
        secondFusionColumnId: this.rongheDialogTable[1].rongheFusion,
        firstDisplayNameColumnIds: this.rongheDialogTable[0].displayName,
        secondDisplayNameColumnIds: this.rongheDialogTable[1].displayName,
      };
      this.$api.dataFusion(requestData).then((res) => {
        if (res.code == 200) {
          this.$message({
            message: res.message,
            type: "success",
          });
          this.getHis();
          this.rongheDialogVisible = false;
        }
      });
    },
    rongheNextStep() {
      if (this.rongheStep === 1) {
        if (
          this.rongheSelect.length === 2 &&
          this.rongheDialogTable.length !== 2
        ) {
          this.$message({
            message: "请点击搜索并选择需要合并的数据",
            type: "warning",
          });
          return false;
        }
        if (this.rongheDialogTable.length === 2) {
          if (
            !this.$refs.rongheTableRef[0].selection.length ||
            !this.$refs.rongheTableRef[1].selection.length
          ) {
            this.$message.warning("请选择需要合并的数据");
            return false;
          }
          this.rongheDialogTable = this.rongheDialogTable.map((item, index) => {
            item.dataSelect = this.$refs.rongheTableRef[index].selection.map(
              (e) => e.id
            );
            return item;
          });
          this.rongheStep++;
        } else {
          this.$message({
            message: "请选择两个数据表",
            type: "warning",
          });
        }
        return false;
      }
      if (this.rongheStep === 2) {
        if (
          !this.rongheDialogTable[0].rongheFusion ||
          !this.rongheDialogTable[1].rongheFusion
        ) {
          // 提示用户
          this.$message({
            message: "请选择融合字段",
            type: "warning",
          });
          return false;
        }
        this.rongheDialogTable = this.rongheDialogTable.map((item) => {
          item.displayName.push(item.rongheFusion);
          return item;
        });
        this.rongheStep++;
        return false;
      }
    },
    ronghePrevStep() {
      this.rongheStep--;
    },
    onFilterDialogSubmitFnsss() {
      this.filterTabsSelect = "";
      this.currPage2 = 1;
      this.pageSize2 = 10;
      this.onFilterDialogSubmitFn();
    },
    onFilterDialogSubmitFn() {
      let bigArr = [];
      let pArr = [];
      for (let index = 0; index < this.filterTables.length; index++) {
        bigArr[index] = {};
        bigArr[index].tableId = this.filterTables[index].id;
        bigArr[index].tableName = this.filterTables[index].tableName;
        bigArr[index].tableCurrPage = this.currPage2;
        bigArr[index].tablePageSize = this.pageSize2;
        bigArr[index].tableTotalSize = 0;
        pArr.push(
          this.$api.queryDataTableColumn(this.filterTables[index].id),
          this.$api.filterImportTableData(
            bigArr[index].tableCurrPage,
            bigArr[index].tablePageSize,
            {
              pageNum: this.currPage2,
              pageSize: this.pageSize2,
              taskNumber: this.filterForm.checked,
              startDate: this.filterForm.date.length
                ? this.filterForm.date[0]
                : "",
              endDate: this.filterForm.date.length
                ? this.filterForm.date[1]
                : "",
              startTime: this.filterForm.time.length
                ? this.filterForm.time[0]
                : "",
              endTime: this.filterForm.time.length
                ? this.filterForm.time[1]
                : "",
              dataTableId: this.filterTables[index].id,
              customCondition: this.filterForm.columnOptions
                // customCondition: this.filterForm.possibleValues
                .map((e) => {
                  if (e.value.length) {
                    return {
                      columnName: e.value,
                      columnType: e.columnType,
                      columnValue: e.selected,
                      majorCondition: e.value2,
                      minorCondition: e.value3,
                    };
                  }
                })
                .filter((e) => e),
            }
          )
        );
      }

      Promise.all(pArr).then((res) => {
        this.filterShow = false;
        for (
          let pIndex = 0, tIndex = 0;
          pIndex < pArr.length;
          pIndex = pIndex + 2, tIndex++
        ) {
          bigArr[tIndex].tableHeader = res[pIndex].result;
          let list = JSON.parse(JSON.stringify(res[pIndex + 1].result.list));
          let tempid, temptableid;
          list = list.map((e) => {
            tempid = e.id;
            temptableid = e.importDataTableId;
            e = JSON.parse(e.dataInfo);
            e.id = tempid;
            e.importDataTableId = temptableid;
            return e;
          });
          bigArr[tIndex].tableData = list;
          bigArr[tIndex].tableTotalSize = res[pIndex + 1].result.total;
        }
        this.filterTableResult = bigArr;
        if (this.filterTabsSelect == "") {
          this.filterTabsSelect = this.filterTables[0]?.id;
        }
        this.leftSelectId = "";
        this.hisTableId = "";
        this.tableList = [];
      });
    },
    rongheSearch() {
      if (!this.rongheSelect.length) {
        this.$message({
          message: "请选择两个数据表进行查询",
          type: "warning",
        });
        return false;
      }
      let bigArr = [];
      let pArr = [];
      for (let index = 0; index < this.rongheSelect.length; index++) {
        bigArr[index] = {};
        bigArr[index].tableId = this.rongheSelect[index][2];
        bigArr[index].tableName = this.getTreeTableName(
          "rongheTree",
          "id",
          this.rongheSelect[index][2]
        );
        bigArr[index].tableCurrPage = 1;
        bigArr[index].tablePageSize = 10;
        bigArr[index].tableTotalSize = 0;
        bigArr[index].displayName = [];
        pArr.push(
          this.$api.queryDataTableColumn(this.rongheSelect[index][2]),
          this.$api.filterImportTableData(
            bigArr[index].tableCurrPage,
            bigArr[index].tablePageSize,
            {
              pageNum: bigArr[index].tableCurrPage,
              pageSize: bigArr[index].tablePageSize,
              dataTableId: this.rongheSelect[index][2],
            }
          )
        );
      }
      Promise.all(pArr).then((res) => {
        for (
          let pIndex = 0, tIndex = 0;
          pIndex < pArr.length;
          pIndex = pIndex + 2, tIndex++
        ) {
          bigArr[tIndex].tableHeader = res[pIndex].result;

          let list = JSON.parse(JSON.stringify(res[pIndex + 1].result.list));
          let tempid, temptableid;
          list = list.map((e) => {
            tempid = e.id;
            temptableid = e.importDataTableId;
            e = JSON.parse(e.dataInfo);
            e.id = tempid;
            e.importDataTableId = temptableid;
            return e;
          });
          bigArr[tIndex].tableData = list;
          bigArr[tIndex].tableTotalSize = res[pIndex + 1].result.totalSize;
        }
        this.rongheDialogTable = bigArr;
      });
    },
    rongheChange(value) {
      if (value.length > 2) {
        this.$message({
          message: "只能两个表进行融合",
          type: "warning",
        });
        this.rongheSelect = value.slice(0, 2);
        return false;
      }
    },
    clickRonghe() {
      this.rongheDialogVisible = true;
    },
    /**
     * 在树种查找某个属性跟传入的id一样的name
     * @param {*} tree 在哪个树中遍历寻找
     * @param {*} propName 寻找哪个字段
     * @param {*} id 返回跟当前id一样的name
     */
    getTreeTableName(tree, propName, id) {
      let name = "";
      this[tree].map((e0) => {
        e0.children.length &&
          e0.children.map((e1) => {
            e1.children &&
              e1.children.map((e2) => {
                if (e2[propName] == id) {
                  name = e2.dataTableName;
                }
              });
          });
      });
      return name;
    },
    getDaoruSelectOptions() {
      Promise.all([
        this.$api.ysjtqGetFileTypeApi(2),
        this.$api.getDataTableByType(),
      ]).then((res) => {
        this.optionsTree = res[0].result.map((e0) => {
          e0.sid = e0.databaseType;
          e0.name = e0.databaseTypeName;
          e0.children = e0.dataTypeVoList.map((e1) => {
            e1.sid = e1.dataTypeId;
            e1.name = e1.dataTypeName;
            e1.children = res[1].result.filter((e2) => {
              e2.sid = e2.dataTableId;
              e2.name = e2.dataTableName;
              return e2.dataTypeId == e1.dataTypeId;
            });
            return e1;
          });
          return e0;
        });
      });
    },
    clickLeftTreeItem(id, tableId) {
      this.leftSelectId = id;
      this.hisTableId = "";
      this.fusionId = "";
      this.currPage = 1;
      this.getTableHeaderAndData(this.leftSelectId);
    },
    getTableHeaderAndData(tableId) {
      Promise.all([
        this.$api.queryDataTableColumn(tableId),
        this.$api.filterImportTableData(this.currPage, this.pageSize, {
          pageNum: this.currPage,
          pageSize: this.pageSize,
          dataTableId: tableId,
        }),
      ]).then((res) => {
        if (res[0].code == 200) {
          this.tabelHeader = res[0].result;
          console.log("表格===", this.tabelHeader);
        }
        if (res[1].code == 200) {
          let list = JSON.parse(JSON.stringify(res[1].result.list));
          let tempid, temptableid;
          list = list.map((e) => {
            tempid = e.id;
            temptableid = e.importDataTableId;
            e = JSON.parse(e.dataInfo);
            e.id = tempid;
            e.importDataTableId = temptableid;
            return e;
          });
          this.tableList = list;

          this.pageTotal = res[1].result.total;

          this.filterTableResult = [];
        }
      });
    },

    onDaoruDialogCancelFn() {
      this.daoruDialogFlag = false;
      this.filterShow = false;
    },
    async onDaoruDialogSubmitFn() {
      if (this.multiSelect.length == 0) {
        this.$message({
          message: "请选择要导入的表",
          type: "warning",
        });
        return;
      }
      let data = this.multiSelect.map((e) => {
        return e[2];
      });
      let res = await this.$api.importTable(data);
      // 提示用户
      if (res.code == 200) {
        this.$message({
          message: res.result,
          type: "success",
        });
        this.daoruDialogFlag = false;
      } else {
        this.$message({
          message: "导入失败",
          type: "error",
        });
      }
      this.getleftTree();
    },
    pageMore(e, index) {},
    // 导入弹窗中搜索按钮---table获取
    async importFilterSearch() {
      let bigArr = [];
      let pArr = [];
      for (let index = 0; index < this.multiSelect.length; index++) {
        bigArr[index] = {};
        bigArr[index].tableId = this.multiSelect[index][2];
        bigArr[index].tableName = this.getTreeTableName(
          "optionsTree",
          "dataTableId",
          this.multiSelect[index][2]
        );
        bigArr[index].tableCurrPage = 1;
        bigArr[index].tablePageSize = 10;
        bigArr[index].tableTotalSize = 0;
        pArr.push(
          this.$api.selectByTableId({
            dataTableId: this.multiSelect[index][2],
          }),
          this.$api.findList({
            pageNum: bigArr[index].tableCurrPage,
            pageSize: bigArr[index].tablePageSize,
            dataTableId: this.multiSelect[index][2],
            searchContent: this.searchKeyWord,
          })
        );
      }
      Promise.all(pArr).then((res) => {
        for (
          let pIndex = 0, tIndex = 0;
          pIndex < pArr.length;
          pIndex = pIndex + 2, tIndex++
        ) {
          bigArr[tIndex].tableHeader = res[pIndex].result;
          let result = JSON.parse(res[pIndex + 1].result);
          bigArr[tIndex].tableData = result.content;
          bigArr[tIndex].tableTotalSize = result.totalSize;
        }
        this.importDialogTabsTable = bigArr;
        this.editableTabsValue = this.multiSelect[0][2];
      });
    },
    getleftTree() {
      Promise.all([
        this.$api.ysjtqGetFileTypeApi(2),
        this.$api.queryImportTable(),
      ]).then((res) => {
        this.pageLeftTree = res[0].result.map((e0) => {
          e0.dataTypeVoList.map((e1) => {
            e1.children = res[1].result.filter((e2) => {
              return e2.dataTypeId == e1.dataTypeId;
            });
          });
          return e0;
        });
        this.rongheTree = res[0].result.map((e0) => {
          e0.sid = e0.databaseType;
          e0.name = e0.databaseTypeName;
          e0.children = e0.dataTypeVoList.map((e1) => {
            e1.sid = e1.dataTypeId;
            e1.name = e1.dataTypeName;
            e1.children = res[1].result.filter((e2) => {
              e2.sid = e2.id;
              e2.name = e2.dataTableName;
              return e2.dataTypeId == e1.dataTypeId;
            });
            return e1;
          });
          return e0;
        });
      });
    },
    // 关闭导入dialog时候的数据重置
    resetDaoruDialogDataFn() {
      this.currentDialogTableItemArray = [];
      this.fileType = "";
    },
    importForm() {
      this.daoruDialogFlag = true;
    },
    addBtn22() {
      this.$set(
        this.filterForm,
        "columnOptions",
        this.filterForm.columnOptions.concat({
          value: "",
          selected: "",
          value2: "",
          value3: "",
          columnType: "",
          colum2: [],
          colum3: [
            { value: "and", label: "与" },
            { value: "or", label: "或" },
          ],
          possibleValues: [],
        })
      );
    },
  },
};
</script>

<style lang="scss" scoped>
::v-deep .el-pagination__rightwrapper {
  display: flex;
  align-items: center;
}
::v-deep .daoru_tab_pane {
  height: 100%;
}
.shaixuanronghe_wrap {
  width: 100%;
  height: 100%;
  display: flex;
  ::v-deep .multi_cascader {
    .el-input {
      .el-input__inner {
        &::placeholder {
          color: transparent;
        }
      }
    }
  }

  ::v-deep .bin_dialog {
    .editDialog {
      .input-box {
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 5px auto;

        .name {
          width: 100px;
          text-align: right;
          color: #fff;
          padding-right: 10px;
        }
        .input {
          .el-input {
            .el-input__inner {
              width: 520px;
              background-color: rgba(0, 0, 0, 0);
              border: 1px solid #02fff4;
              color: #fff;
            }
          }
        }
      }

      .dialog_main_btns {
        margin-top: 18px;
        text-align: center;
      }
    }
  }

  .contentbox {
    height: 400px;
    overflow-y: scroll;
  }

  .left_wrap {
    flex: 0 0 auto;
    width: 360px;
    height: 100%;
    display: flex;
    flex-direction: column;

    .fenlei_wrap {
      width: 100%;
      flex: 3 1 auto;
      height: 0;
      box-sizing: border-box;
      border: 1px solid #02fff4;
      background: rgba(2, 82, 107, 0.6);
    }

    .his_wrap {
      width: 100%;
      flex: 2 1 auto;
      height: 0;
      margin-top: 16px;
      box-sizing: border-box;
      border: 1px solid #02fff4;
      background: rgba(2, 82, 107, 0.6);
      display: flex;
      flex-direction: column;

      .his_list_wrap {
        flex: 1 1 auto;
        width: 100%;
        height: 0;
        padding: 20px 15px;
        overflow: hidden;
        box-sizing: border-box;

        .his_list {
          width: 100%;
          height: 100%;
          overflow: auto;

          .list_item {
            display: flex;
            height: 40px;
            align-items: center;
            margin-bottom: 5px;
            border-left: 3px solid transparent;

            .item_left {
              width: 0;
              flex: 1 1 auto;
              height: 100%;
              background-color: rgba(3, 23, 34, 0.9);
              display: flex;
              align-items: center;
              justify-content: space-between;
              font-size: 16px;
              color: #02fff4;
              box-sizing: border-box;
              padding: 0 15px;
              cursor: pointer;

              &:hover {
                opacity: 0.8;
              }
            }

            .item_btn {
              flex: 0 0 auto;
              width: 40px;
              height: 40px;
              background-color: rgba(3, 23, 34, 0.9);
              display: flex;
              align-items: center;
              justify-content: center;
              color: #02fff4;
              font-size: 16px;
              margin-left: 4px;
              cursor: pointer;

              &:hover {
                opacity: 0.8;
              }
            }

            &.active {
              border-left: 3px solid #02fff4;
            }
          }
        }
      }
    }
  }

  .right_wrap {
    flex: 1 1 auto;
    width: 0;
    height: 100%;
    box-sizing: border-box;
    border: 1px solid #02fff4;
    background: rgba(2, 82, 107, 0.6);
    margin-left: 15px;
    display: flex;
    flex-direction: column;

    .shuju_table_wrap {
      flex: 1 1 auto;
      width: 100%;
      height: 0;
      display: flex;
      flex-direction: column;
      padding: 20px;
      box-sizing: border-box;

      .shuju_table {
        flex: 1 1 auto;
        width: 100%;
        height: 0;

        .caozuo_btns {
          font-weight: 700;
          color: #02fff4;
          font-size: 24px;
          .icon {
            margin: 0 5px;
            cursor: pointer;

            &:hover {
              opacity: 0.7;
            }
          }
        }
      }
      .table_tabs {
        ::v-deep .el-tabs__content {
          height: calc(100% - 40px);
          .el-tab-pane {
            height: 100%;
            .dialog_table_wrap {
              height: 100%;
            }
          }
        }
      }

      .shuju_fenye {
        flex: 0 0 auto;
        width: 100%;
        margin-top: 20px;

        .pageBox {
          height: 45px;
          display: flex;
          justify-content: space-between;
          align-items: center;
          .bin_fenyeqi {
            display: block !important;
            width: 100%;
          }

          .pageInfo {
            height: 18px;
            font-family: Source Han Sans CN, Source Han Sans CN;
            font-weight: 400;
            font-size: 18px;
            color: #ffffff;
            text-align: center;
            font-style: normal;
            text-transform: none;

            .size {
              color: #02fff4;
            }
          }
        }
      }
    }
  }

  .common_title {
    flex: 0 0 auto;
    width: 100%;
    line-height: 58px;
    border-bottom: 1px solid #02fff4;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-sizing: border-box;
    padding: 0 20px;
    background-color: rgba(2, 255, 244, 0.15);

    .common_title_name {
      font-size: 20px;
      color: #fff;
      line-height: 58px;
      font-size: 20px;
      padding-left: 12px;
      position: relative;
      font-weight: 700;

      &::after {
        content: "";
        position: absolute;
        width: 5px;
        height: 20px;
        background-color: #02fff4;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
      }
    }

    .common_title_btns {
      display: flex;
      align-items: center;

      .title_btn_item {
        display: flex;
        align-items: center;

        .calcImport {
          text-indent: 24px;
          position: relative;

          &::before {
            width: 18px;
            height: 18px;
            background: url("../../../assets/expot.png") center center no-repeat;
            background-size: 100% 100%;
            position: absolute;
            left: 20px;
            top: 10px;
            content: "";
          }
        }

        .addBtnexport {
          text-indent: 24px;
          position: relative;

          &::before {
            width: 18px;
            height: 18px;
            background: url("../../../assets/exporticon.png") center center
              no-repeat;
            background-size: 100% 100%;
            position: absolute;
            left: 20px;
            top: 10px;
            content: "";
          }
        }

        .shaixuanBtn {
          text-indent: 24px;
          position: relative;

          &::before {
            width: 16px;
            height: 16px;
            background: url("../../../assets/shaixuan_iconicon.png") center
              center no-repeat;
            background-size: 100% 100%;
            position: absolute;
            left: 20px;
            top: 12px;
            content: "";
          }
        }

        .ronghepingtaiBtn {
          text-indent: 24px;
          position: relative;
          margin: 0 10px;

          &::before {
            width: 20px;
            height: 14px;
            background: url("../../../assets/ronghepingtai.png") center center
              no-repeat;
            background-size: 100% 100%;
            position: absolute;
            left: 20px;
            top: 14px;
            content: "";
          }
        }
      }
    }
  }

  .common_collapse {
    height: calc(100% - 60px);
    box-sizing: border-box;
    padding: 10px;
    overflow: auto;

    ::v-deep .collList {
      height: 100%;
      border: none;

      .el-collapse-item__header {
        padding-left: 16px;
        font-weight: 400;
        font-size: 18px;
        background: rgba(2, 255, 244, 0.1);
        color: #a2fffb;
        border: 1px solid #02fff4;
        margin-bottom: 10px;
        box-shadow: inset 0px 0px 25px 1px #02fff4;
        border-radius: 5px;
      }

      .el-collapse-item__wrap {
        background-color: transparent;
        border-bottom: none;

        .listitem {
          width: 100%;
          box-sizing: border-box;
          color: #fff;
          padding: 0 16px;
          background-color: #031722;
          margin-bottom: 10px;
          box-sizing: border-box;
          height: 40px;
          line-height: 40px;
          border-radius: 3px;
          box-shadow: inset 0px 0px 25px 1px #02fff4;
          // border: 1px solid #02fff4;
        }

        .item {
          width: 100%;
          box-sizing: border-box;
          cursor: pointer;
          color: #fff;
          padding: 0 16px;
          margin-left: 10px;
          background-color: #031722;
          margin-bottom: 10px;
          box-sizing: border-box;
          height: 30px;
          line-height: 30px;
          border-left: 5px solid transparent;

          &.act {
            border-left-color: #02fff4;
          }
        }
      }
    }
  }

  .filter_dialog_content {
    .filter_wrap {
      display: flex;
      justify-content: space-between;

      .selectMult {
        width: 290px;
        height: 600px;
        overflow: scroll;
        border: 1px solid #02fff4;
      }

      .filter_form_wrap {
        width: calc(100% - 310px);
        box-sizing: border-box;
        // padding-top: 20px;
        height: 600px;
        border: 1px solid #02fff4;

        ::v-deep .el-form .el-form-item__label {
          color: #fff;
        }

        .top_form {
          box-sizing: border-box;
          padding-right: 20px;
        }

        .bottom_form {
          box-sizing: border-box;
          padding: 10px 0px 10px 10px;
          height: 440px;
          overflow-y: scroll;
          // border-top: 1px solid #02fff4;
        }
      }
    }

    .dialog_main_btns {
      display: flex;
      align-items: center;
      justify-content: center;
      margin-top: 50px;
    }
  }
  .daoru_dialog,
  .ronghe_dialog {
    ::v-deep .el-dialog {
      height: 82vh;
      .el-dialog__body {
        height: 91%;
        box-sizing: border-box;
        padding: 30px 20px;
        max-height: 91%;
        min-height: 91%;
        .daoru_dialog_content {
          height: 80%;
          .el-tabs__content {
            height: 98%;
          }
          .ronghe_text {
            font-family: Source Han Sans CN, Source Han Sans CN;
            font-weight: 400;
            font-size: 18px;
            color: rgba(255, 255, 255, 0.5);
            margin-bottom: 20px;
          }

          .fusionColumn {
            display: flex;
            justify-content: space-between;
            width: 100%;
            align-items: flex-start;

            .fusionItem {
              width: 50%;

              .fusionRadio {
                display: flex;
                flex-direction: column;

                .el-radio {
                  margin-bottom: 10px;
                }
              }
            }

            // ::v-deep
            .el-input__inner {
              color: #fff;
              border-color: #02fff4 !important;
              background-color: transparent !important;
            }
          }

          .displayColumn {
            display: flex;
            justify-content: space-between;
            width: 100%;
            align-items: flex-start;

            .displayItem {
              width: 50%;

              .displayCheckbox {
                display: flex;
                flex-direction: column;

                .el-checkbox {
                  margin-bottom: 10px;
                }
              }
            }
          }

          .displayColumnNew {
            justify-content: space-between;
            width: 100%;
            align-items: flex-start;

            .displayItem {
              width: 100%;
              margin-bottom: 20px;

              .displayCheckbox {
                // display: flex;
                // flex-direction: column;
                .el-checkbox {
                  margin-bottom: 10px;
                  width: 29%;
                }
              }
            }
          }

          .table_text {
            font-family: Source Han Sans CN, Source Han Sans CN;
            font-weight: 400;
            font-size: 18px;
            color: #02fff4;
            margin-bottom: 10px;
          }

          ::v-deep .el-select {
            width: 300px;
          }

          .search_wrap {
            display: flex;
            align-items: center;
            margin-bottom: 20px;

            .search_item {
              flex: 1 1 auto;
              width: 0;
              display: flex;
              align-items: center;

              &:nth-child(even) {
                margin: 0 20px;
              }

              .name {
                flex: 0 0 auto;
                width: 100px;
                font-size: 18px;
                color: #fff;
              }

              .ipt {
                flex: 1 1 auto;
                width: 0;
              }
            }

            .search_btn {
              flex: 0 0 auto;
            }
          }

          .dialog_table_wrap {
            // margin-top: 10px;
            height: 100%;
          }

          .dialog_fenye_wrap {
            margin-top: 12px;

            .pageBox {
              height: 45px;
              display: flex;
              justify-content: space-between;
              align-items: center;

              .pageInfo {
                height: 18px;
                font-family: Source Han Sans CN, Source Han Sans CN;
                font-weight: 400;
                font-size: 18px;
                color: #ffffff;
                text-align: center;
                font-style: normal;
                text-transform: none;

                .size {
                  color: #02fff4;
                }
              }
            }
          }

          .dialog_main_btns {
            display: flex;
            align-items: center;
            justify-content: center;
            margin-top: 50px;
          }
        }
      }
    }
  }
  .daoru_dialog {
    .el-tabs__content {
      height: 92%;
    }
  }
}
</style>
<style>
.el-time-range-picker__header {
  color: #fff;
}

.el-time-spinner__item {
  color: #fff;
  background: inherit !important;
}

.el-time-spinner__item.active {
  color: #409eff !important;
}

.el-time-panel__btn {
  color: #fff;
}

.el-time-spinner__arrow {
  color: #fff;
}

.el-time-spinner__wrapper.is-arrow
  .el-time-spinner__item:hover:not(.disabled):not(.active) {
  background: inherit !important;
}
</style>
